<template>
	<div style="margin-top: 20px;" align="center">
		<div style="width: 60%;box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.2);background-color: #ffffff;">
			<div style="width: 98%;display:inline-block;margin-top: 10px;margin-bottom: 10px;">
				<div style="text-align: left;">
					<el-row>
						<el-col :span="12">
							<el-radio-group v-model="radio">
								<el-radio :label="3">单程</el-radio>
								<el-radio :label="6">往返</el-radio>
								<!-- 								<el-radio :label="9">中转</el-radio> -->
							</el-radio-group>
						</el-col>
						<el-col :span="12">
							<div style="text-align: right;">
								<el-switch v-model="convenientQuery" active-text="便捷查询" inactive-text="">
								</el-switch>
							</div>
						</el-col>
					</el-row>
				</div>
				<div style="margin-top: 10px;" align='left'>
					<el-row :gutter="20">
						<el-col :span="9">
							<div style="width: 100%;box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.2);height: 77px;">
								<el-row>
									<el-col :span="12" style="border-right: 0.5px solid rgb(0, 0, 0, 0.05);">
										<div style="width: 70%;margin-left: 15%;height: 77px;">
											<div style="position: absolute;top: calc(50% - 25px);">
												<div style="font-size: 10px;margin-bottom: 5px;color: #CCCCCC;">
													出发地
												</div>
												<div style="font-size: 20px;font-weight: 900;" id="placeOfDeparture"
													@click="cityShow()">
													{{cityName}}
												</div>
											</div>
										</div>
										<div style="position: absolute;width: 170%;z-index: 900;box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.2);margin-top: 10px;border: #DDDDDD 1px solid;border-radius: 10px;"
											v-if="city" id="city">
											<table style="width: 100%;border-collapse:collapse;">
												<tr>
													<td style="width: 15%;background-color: #EBEBEB;vertical-align: top;"
														align="center">
														<a href="javascript:;" style="text-decoration:none;"
															@click="changeENW(0,1)">
															<div style="margin-top: 10px;width: 90%;border-radius: 5px;padding-top: 10px;padding-bottom: 10px;"
																align="left"
																:class="internal==1 ? 'butone' : 'butoneNo'">
																<span style="font-size: 15px;margin-left: 10px;">
																	国内
																</span>
															</div>
														</a>
														<a href="javascript:;" style="text-decoration:none;"
															@click="changeENW(1,1)">
															<div style="margin-top: 10px;width: 90%;border-radius: 5px;padding-top: 10px;padding-bottom: 10px;"
																align="left"
																:class="external==1 ? 'butone' : 'butoneNo'">
																<span
																	style="font-size: 15px;display: block;margin-left: 10px;">
																	国际及<br>
																	中国港澳台
																</span>
															</div>
														</a>
													</td>
													<td
														style="width: 85%;background-color: #ffffff;border-left: #DDDDDD 1px solid;vertical-align: top;">

														<div style="width: 100%;height: 60px;border-bottom: #EDEDED 1px solid;margin-bottom: 30px;"
															v-if="internal==1">
															<div style="height: 100%;display: inline-block;margin-left: 20px;margin-right: 20px;"
																v-for="item in domesticAbbreviation" align="center">
																<a href="javascript:;" style="text-decoration:none;">
																	<div :class="item.type"
																		style="height: 100%;display: inline-block;box-sizing: border-box;font-size: 15px;"
																		@click="changeCity(item.key,0)">
																		<span style="line-height: 60px;">
																			{{item.name}}
																		</span>
																	</div>
																</a>
															</div>
														</div>


														<div style="width: 100%;height: 60px;border-bottom: #EDEDED 1px solid;margin-bottom: 30px;"
															v-if="external==1">

															<div style="height: 100%;display: inline-block;margin-left: 20px;margin-right: 20px;"
																v-for="item in foreignAbbreviations" align="center">
																<a href="javascript:;" style="text-decoration:none;">
																	<div :class="item.type"
																		style="height: 100%;display: inline-block;box-sizing: border-box;font-size: 13px;"
																		@click="changeCity(item.key,1)">
																		<span style="line-height: 60px;">
																			{{item.name}}
																		</span>
																	</div>
																</a>
															</div>
														</div>

														<div style="margin-bottom: 30px;">
															<div style="margin-top: 20px;" v-for="city in cityList"
																v-if="dShow[city.name].Show=='1'">
																<el-row>
																	<el-col :span="2"
																		style="text-align: center;font-weight: 900;font-size: 13px;margin-top: 5px;"
																		v-if="city.name!='亚洲' && city.name!='欧洲' && city.name!='大洋洲' && city.name!='非洲' && city.name!='美洲'">
																		{{city.name}}
																	</el-col>
																	<el-col
																		:span="city.name=='亚洲' || city.name=='欧洲' || city.name=='大洋洲' || city.name=='美洲' || city.name=='非洲' ? 24 : 22">
																		<a href="javascript:;"
																			style="text-decoration:none;">
																			<div class="Gonger"
																				style="width: 14.28%;text-align: center;display: inline-block;font-size: 13px;margin-bottom: 7px;padding-top: 5px;padding-bottom: 5px;"
																				v-for="cityp in city.data"
																				@click="cityChange(cityp.city_name)">
																				{{cityp.city_name}}
																			</div>
																		</a>
																	</el-col>
																</el-row>
															</div>
														</div>

													</td>
												</tr>
											</table>
										</div>
									</el-col>
									<el-col :span="12">
										<div style="width: 70%;margin-left: 15%;height: 77px;">
											<div style="position: absolute;top: calc(50% - 25px);">
												<div style="font-size: 10px;margin-bottom: 5px;color: #CCCCCC;">
													目的地
												</div>
												<div style="font-size: 20px;font-weight: 900;" id="destination"
													@click="cityShowTwo()">
													{{cityNameTwo}}
												</div>
											</div>
										</div>

										<div style="position: absolute;width: 170%;z-index: 900;box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.2);margin-top: 10px;border: #DDDDDD 1px solid;border-radius: 10px;"
											v-if="cityTwo" id="cityTwo">
											<table style="width: 100%;border-collapse:collapse;">
												<tr>
													<td style="width: 15%;background-color: #EBEBEB;vertical-align: top;"
														align="center">
														<a href="javascript:;" style="text-decoration:none;"
															@click="changeENW(0,0)">
															<div style="margin-top: 10px;width: 90%;border-radius: 5px;padding-top: 10px;padding-bottom: 10px;"
																align="left"
																:class="internalTwo==1 ? 'butone' : 'butoneNo'">
																<span style="font-size: 15px;margin-left: 10px;">
																	国内
																</span>
															</div>
														</a>
														<a href="javascript:;" style="text-decoration:none;"
															@click="changeENW(1,0)">
															<div style="margin-top: 10px;width: 90%;border-radius: 5px;padding-top: 10px;padding-bottom: 10px;"
																align="left"
																:class="externalTwo==1 ? 'butone' : 'butoneNo'">
																<span
																	style="font-size: 15px;display: block;margin-left: 10px;">
																	国际及<br>
																	中国港澳台
																</span>
															</div>
														</a>
													</td>
													<td
														style="width: 85%;background-color: #ffffff;border-left: #DDDDDD 1px solid;vertical-align: top;">

														<div style="width: 100%;height: 60px;border-bottom: #EDEDED 1px solid;margin-bottom: 30px;"
															v-if="internalTwo==1">
															<div style="height: 100%;display: inline-block;margin-left: 20px;margin-right: 20px;"
																v-for="item in domesticAbbreviationTwo" align="center">
																<a href="javascript:;" style="text-decoration:none;">
																	<div :class="item.type"
																		style="height: 100%;display: inline-block;box-sizing: border-box;font-size: 15px;"
																		@click="changeCity(item.key,0,0)">
																		<span style="line-height: 60px;">
																			{{item.name}}
																		</span>
																	</div>
																</a>
															</div>
														</div>


														<div style="width: 100%;height: 60px;border-bottom: #EDEDED 1px solid;margin-bottom: 30px;"
															v-if="externalTwo==1">

															<div style="height: 100%;display: inline-block;margin-left: 20px;margin-right: 20px;"
																v-for="item in foreignAbbreviationsTwo" align="center">
																<a href="javascript:;" style="text-decoration:none;">
																	<div :class="item.type"
																		style="height: 100%;display: inline-block;box-sizing: border-box;font-size: 13px;"
																		@click="changeCity(item.key,1,0)">
																		<span style="line-height: 60px;">
																			{{item.name}}
																		</span>
																	</div>
																</a>
															</div>
														</div>

														<div style="margin-bottom: 30px;">
															<div style="margin-top: 20px;" v-for="city in cityList"
																v-if="dShowTwo[city.name].Show=='1'">
																<el-row>
																	<el-col :span="2"
																		style="text-align: center;font-weight: 900;font-size: 13px;margin-top: 5px;"
																		v-if="city.name!='亚洲' && city.name!='欧洲' && city.name!='大洋洲' && city.name!='非洲' && city.name!='美洲'">
																		{{city.name}}
																	</el-col>
																	<el-col
																		:span="city.name=='亚洲' || city.name=='欧洲' || city.name=='大洋洲' || city.name=='美洲' || city.name=='非洲' ? 24 : 22">
																		<a href="javascript:;"
																			style="text-decoration:none;">
																			<div class="Gonger"
																				style="width: 14.28%;text-align: center;display: inline-block;font-size: 13px;margin-bottom: 7px;padding-top: 5px;padding-bottom: 5px;"
																				v-for="cityp in city.data"
																				@click="cityChangeTwo(cityp.city_name)">
																				{{cityp.city_name}}
																			</div>
																		</a>
																	</el-col>
																</el-row>
															</div>
														</div>

													</td>
												</tr>
											</table>
										</div>
									</el-col>
								</el-row>
							</div>
						</el-col>
						<el-col :span="11">
							<div style="height: 77px;box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.2);width: 100%;">
								<el-row>
									<el-col :span="12">
										<div style="width: 70%;margin-left: 15%;height: 77px;">
											<div style="position: absolute;top: calc(50% - 25px);">
												<div style="font-size: 10px;margin-bottom: 5px;color: #CCCCCC;">
													出发时间
												</div>
												<div style="font-size: 20px;font-weight: 900;" id="departureTime"
													@click="departureTime()">
													{{departureDate[0]}}<span
														style="margin-left: 5px;">{{departureDate[1]}}</span>
												</div>
											</div>
										</div>
									</el-col>
									<el-col :span="12">
										<div v-if="radio==9" style="width: 70%;margin-left: 15%;height: 77px;">
											<div style="position: absolute;top: calc(50% - 25px);">
												<div style="font-size: 10px;margin-bottom: 5px;color: #CCCCCC;">
													指定中转城市
												</div>
												<div style="font-size: 20px;font-weight: 900;">
													<div v-if="transship==''" style="color: #CCCCCC;">
														中转城市
													</div>
													<div v-if="transship!=''">
														{{transship}}
													</div>
												</div>
											</div>
										</div>
										<div v-if="radio==3"
											style="width: 70%;margin-left: 15%;height: 77px;text-align: right;">
											<div style="line-height: 77px;display: inline-block;margin-top: 7px;">
												<div style="font-size: 15px;font-weight: 900;text-align: right;">
													<a href="javascript:;" style="color: #CCCCCC;text-decoration:none;"
														@click="change()">
														<p>+添加返程</p>
													</a>
												</div>
											</div>
										</div>
										<div v-if="radio==6" style="width: 70%;margin-left: 15%;height: 77px;">
											<div style="position: absolute;top: calc(50% - 25px);">
												<div style="font-size: 10px;margin-bottom: 5px;color: #CCCCCC;">
													返回时间
												</div>
												<div style="font-size: 20px;font-weight: 900;" id="returnTime"
													@click="returnTime()">
													{{returnDate[0]}}<span
														style="margin-left: 5px;">{{returnDate[1]}}</span>
												</div>
											</div>
										</div>
									</el-col>
								</el-row>
							</div>
							<div id="calendar" v-if="calendar"
								style="position: absolute;width: 650px;background-color: antiquewhite;z-index: 900;box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.2);margin-top: 5px;">
								<el-calendar v-model="currentDate"></el-calendar>
							</div>
						</el-col>
						<el-col :span="4">
							<el-button type="primary" style="width: 100%;height: 77px;font-size: 25px;font-weight: 900;"
								@click="query()">查询</el-button>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';

	export default {
		async created() {

			var radio = sessionStorage.getItem("radio");
			if (radio == null) {
				this.radio = 3;
				sessionStorage.setItem("radio", 3);
			} else {
				if (radio == 3) {
					this.radio = 3;
				} else if (radio == 6) {
					this.radio = 6;
				} else if (radio == 9) {
					this.radio = 9;
				}
			}

			var convenientQuery = sessionStorage.getItem("convenientQuery");
			if (convenientQuery != null) {
				if (convenientQuery == "true") {
					this.convenientQuery = true;
				} else {
					this.convenientQuery = false;
				}
			}

			var city = sessionStorage.getItem("cityName");
			if (city == null) {
				this.cityName = '长沙';
				sessionStorage.setItem("cityName", '长沙');
			} else {
				this.cityName = city
			}

			var cityTwo = sessionStorage.getItem("cityNameTwo");
			if (cityTwo == null) {
				this.cityNameTwo = '北京';
				sessionStorage.setItem("cityNameTwo", '北京');
			} else {
				this.cityNameTwo = cityTwo;
			}

			var departureDate = sessionStorage.getItem("departureDate");
			if (departureDate == null) {
				this.departureDate = this.dateNow(new Date());
				sessionStorage.setItem("departureDate", this.departureDate);
			} else {
				this.departureDate = departureDate.split(",");
			}

			var returnDate = sessionStorage.getItem("returnDate");
			if (returnDate == null) {
				this.returnDate = this.tomorrow(new Date(), 0);
				sessionStorage.setItem("returnDate", this.returnDate);
			} else {
				this.returnDate = returnDate.split(",");
			}

			var cityData = sessionStorage.getItem("city");
			if (cityData != null) {
				this.cityList = JSON.parse(cityData);
			} else {
				var nameContainer = {};
				await axios.post("api/CityAction/cityList")
					.then((res) => {
						if (res.data.code === 200) {
							var cityArray = res.data.data;
							for (var i = 0; i < cityArray.length; i++) {
								if (nameContainer[cityArray[i].letter] == null) {
									nameContainer[cityArray[i].letter] = {
										"name": cityArray[i].letter,
										"data": []
									}
									nameContainer[cityArray[i].letter].data.push(cityArray[i]);
								} else {
									nameContainer[cityArray[i].letter].data.push(cityArray[i]);
								}
							}
							sessionStorage.setItem('city', JSON.stringify(nameContainer));
							sessionStorage.setItem('cityArray', JSON.stringify(cityArray));
							this.cityList = nameContainer;
						}
					});
			}
		},
		watch: {
			dateCalendar: {
				handler(newVal) {
					var currentCli = document.getElementById("calendar");
					var departureTime = document.getElementById("departureTime");
					var returnTime = document.getElementById("returnTime");

					if (currentCli) {
						if (returnTime == null) {
							if (!currentCli.contains(newVal.target) && !departureTime.contains(newVal.target)) {
								this.calendar = false;
							}
						} else {
							if (!currentCli.contains(newVal.target) && !departureTime.contains(newVal.target) && !
								returnTime.contains(newVal.target)) {
								this.calendar = false;
							}
						}
					}
				},
				deep: true
			},
			currentDate: {
				handler(newVal, oldValue) {
					if (this.departureIsReturn == 0) {

						var departureDate = new Date(this.dateNow(newVal)[0]);
						var nowDate = new Date();
						nowDate.setTime(nowDate.getTime() - 1 * 24 * 60 * 60 * 1000);

						if (departureDate < nowDate) {
							return;
						}

						this.departureDate = this.dateNow(newVal);
						sessionStorage.setItem("departureDate", this.departureDate);

						var departureDate = new Date(this.departureDate[0]);
						var returnDate = new Date(this.returnDate[0]);
						if (departureDate > returnDate) {
							this.returnDate = this.tomorrow(departureDate, 0);
							sessionStorage.setItem("returnDate", this.returnDate);
						}
					} else {
						var returnDate = new Date(this.tomorrow(newVal, 1)[0]);
						var nowDate = new Date();
						nowDate.setTime(nowDate.getTime() - 1 * 24 * 60 * 60 * 1000);

						if (returnDate < nowDate) {
							return;
						}

						this.returnDate = this.tomorrow(newVal, 1);
						sessionStorage.setItem("returnDate", this.returnDate);

						var departureDate = new Date(this.departureDate[0]);
						returnDate = new Date(this.returnDate[0]);
						returnDate.setHours(0, 0, 0, 0);

						nowDate.setTime(nowDate.getTime() + 1 * 24 * 60 * 60 * 1000);
						nowDate.setHours(0, 0, 0, 0);

						if (returnDate - nowDate == 0) {
							this.departureDate = this.returnDate;
							return;
						}

						if (returnDate < departureDate) {
							returnDate.setTime(returnDate.getTime() - 1 * 24 * 60 * 60 * 1000);
							this.departureDate = this.tomorrow(returnDate, 1);
							sessionStorage.setItem("departureDate", this.departureDate);
						}
					}
					this.queryConvenient();
				},
				deep: true
			},
			cityCalendar: {
				handler(newVal) {
					var currentCli = document.getElementById("city");
					var departureTime = document.getElementById("placeOfDeparture");

					if (currentCli) {
						if (!currentCli.contains(newVal.target) && !departureTime.contains(newVal.target)) {
							this.city = false;
						}
					}
				},
				deep: true
			},
			cityCalendarTwo: {
				handler(newVal) {
					var currentCli = document.getElementById("cityTwo");
					var departureTime = document.getElementById("destination");

					if (currentCli) {
						if (!currentCli.contains(newVal.target) && !departureTime.contains(newVal.target)) {
							this.cityTwo = false;
						}
					}
				},
				deep: true
			},
			cityName: {
				handler(newVal, oldValue) {
					if (newVal != this.cityNameTwo) {
						sessionStorage.setItem("cityName", newVal);
						this.queryConvenient();
					} else {
						var temp = oldValue;
						this.cityName = this.cityNameTwo;
						this.cityNameTwo = temp;
						sessionStorage.setItem("cityName", this.cityName);
						this.queryConvenient();
					}
					
					var url = window.location.href;
					if (url.indexOf("/Search") == -1) {
						this.$parent.refresh();
					}
				},
				deep: true
			},
			cityNameTwo: {
				handler(newVal, oldValue) {
					if (newVal != this.cityName) {
						sessionStorage.setItem("cityNameTwo", newVal);
						this.queryConvenient();
					} else {
						var temp = oldValue;
						this.cityNameTwo = this.cityName;
						this.cityName = temp;
						sessionStorage.setItem("cityNameTwo", this.cityNameTwo);
						this.queryConvenient();
					}
				},
				deep: true
			},
			radio: {
				handler(newVal) {
					sessionStorage.setItem("radio", newVal);
					this.queryConvenient();
				},
				deep: true
			},
			convenientQuery: {
				handler(newVal) {
					sessionStorage.setItem("convenientQuery", newVal);
				},
				deep: true
			}
		},
		data() {
			return {
				convenientQuery: true,
				cityName: '长沙',
				cityNameTwo: '北京',
				cityTwo: false,
				city: false,
				calendar: false,
				radio: 3,
				departureDate: "",
				transship: '',
				returnDate: "",
				currentDate: new Date(),
				departureIsReturn: 0,
				cityList: '',
				internalTwo: 1,
				externalTwo: 0,
				internal: 1,
				external: 0,
				dShowTwo: {
					"A": {
						"name": "A",
						"Show": "1"
					},
					"B": {
						"name": "B",
						"Show": "1"
					},
					"C": {
						"name": "C",
						"Show": "1"
					},
					"D": {
						"name": "D",
						"Show": "1"
					},
					"E": {
						"name": "E",
						"Show": "1"
					},
					"G": {
						"name": "G",
						"Show": "0"
					},
					"F": {
						"name": "F",
						"Show": "1"
					},
					"H": {
						"name": "H",
						"Show": "0"
					},
					"I": {
						"name": "I",
						"Show": "0"
					},
					"J": {
						"name": "J",
						"Show": "0"
					},
					"K": {
						"name": "K",
						"Show": "0"
					},
					"L": {
						"name": "L",
						"Show": "0"
					},
					"M": {
						"name": "M",
						"Show": "0"
					},
					"N": {
						"name": "N",
						"Show": "0"
					},
					"P": {
						"name": "P",
						"Show": "0"
					},
					"Q": {
						"name": "Q",
						"Show": "0"
					},
					"R": {
						"name": "R",
						"Show": "0"
					},
					"S": {
						"name": "S",
						"Show": "0"
					},
					"T": {
						"name": "T",
						"Show": "0"
					},
					"U": {
						"name": "U",
						"Show": "0"
					},
					"V": {
						"name": "V",
						"Show": "0"
					},
					"W": {
						"name": "W",
						"Show": "0"
					},
					"X": {
						"name": "X",
						"Show": "0"
					},
					"Y": {
						"name": "Y",
						"Show": "0"
					},
					"Z": {
						"name": "Z",
						"Show": "0"
					},
					"亚洲": {
						"name": "亚洲",
						"Show": "0"
					},
					"美洲": {
						"name": "美洲",
						"Show": "0"
					},
					"欧洲": {
						"name": "欧洲",
						"Show": "0"
					},
					"非洲": {
						"name": "非洲",
						"Show": "0"
					},
					"大洋洲": {
						"name": "大洋洲",
						"Show": "0"
					}
				},
				dShow: {
					"A": {
						"name": "A",
						"Show": "1"
					},
					"B": {
						"name": "B",
						"Show": "1"
					},
					"C": {
						"name": "C",
						"Show": "1"
					},
					"D": {
						"name": "D",
						"Show": "1"
					},
					"E": {
						"name": "E",
						"Show": "1"
					},
					"G": {
						"name": "G",
						"Show": "0"
					},
					"F": {
						"name": "F",
						"Show": "1"
					},
					"H": {
						"name": "H",
						"Show": "0"
					},
					"I": {
						"name": "I",
						"Show": "0"
					},
					"J": {
						"name": "J",
						"Show": "0"
					},
					"K": {
						"name": "K",
						"Show": "0"
					},
					"L": {
						"name": "L",
						"Show": "0"
					},
					"M": {
						"name": "M",
						"Show": "0"
					},
					"N": {
						"name": "N",
						"Show": "0"
					},
					"P": {
						"name": "P",
						"Show": "0"
					},
					"Q": {
						"name": "Q",
						"Show": "0"
					},
					"R": {
						"name": "R",
						"Show": "0"
					},
					"S": {
						"name": "S",
						"Show": "0"
					},
					"T": {
						"name": "T",
						"Show": "0"
					},
					"U": {
						"name": "U",
						"Show": "0"
					},
					"V": {
						"name": "V",
						"Show": "0"
					},
					"W": {
						"name": "W",
						"Show": "0"
					},
					"X": {
						"name": "X",
						"Show": "0"
					},
					"Y": {
						"name": "Y",
						"Show": "0"
					},
					"Z": {
						"name": "Z",
						"Show": "0"
					},
					"亚洲": {
						"name": "亚洲",
						"Show": "0"
					},
					"美洲": {
						"name": "美洲",
						"Show": "0"
					},
					"欧洲": {
						"name": "欧洲",
						"Show": "0"
					},
					"非洲": {
						"name": "非洲",
						"Show": "0"
					},
					"大洋洲": {
						"name": "大洋洲",
						"Show": "0"
					}
				},
				domesticAbbreviationTwo: {
					"1": {
						"name": "ABCDEF",
						"type": "sortClicke",
						"key": "1"
					},
					"2": {
						"name": "GHIJ",
						"type": "sort",
						"key": "2"
					},
					"3": {
						"name": "KLMN",
						"type": "sort",
						"key": "3"
					},
					"4": {
						"name": "PQRSTUVM",
						"type": "sort",
						"key": "4"
					},
					"5": {
						"name": "XYZ",
						"type": "sort",
						"key": "5"
					}
				},
				domesticAbbreviation: {
					"1": {
						"name": "ABCDEF",
						"type": "sortClicke",
						"key": "1"
					},
					"2": {
						"name": "GHIJ",
						"type": "sort",
						"key": "2"
					},
					"3": {
						"name": "KLMN",
						"type": "sort",
						"key": "3"
					},
					"4": {
						"name": "PQRSTUVM",
						"type": "sort",
						"key": "4"
					},
					"5": {
						"name": "XYZ",
						"type": "sort",
						"key": "5"
					}
				},
				foreignAbbreviationsTwo: {
					"1": {
						"name": "亚洲",
						"type": "sortClicke",
						"key": "1"
					},
					"2": {
						"name": "欧洲",
						"type": "sort",
						"key": "2"
					},
					"3": {
						"name": "美洲",
						"type": "sort",
						"key": "3"
					},
					"4": {
						"name": "非洲",
						"type": "sort",
						"key": "4"
					},
					"5": {
						"name": "大洋洲",
						"type": "sort",
						"key": "5"
					}
				},
				foreignAbbreviations: {
					"1": {
						"name": "亚洲",
						"type": "sortClicke",
						"key": "1"
					},
					"2": {
						"name": "欧洲",
						"type": "sort",
						"key": "2"
					},
					"3": {
						"name": "美洲",
						"type": "sort",
						"key": "3"
					},
					"4": {
						"name": "非洲",
						"type": "sort",
						"key": "4"
					},
					"5": {
						"name": "大洋洲",
						"type": "sort",
						"key": "5"
					}
				}
			};
		},
		props: [
			"dateCalendar",
			"cityCalendar",
			"cityCalendarTwo"
		],
		methods: {
			dateNow(date) {
				var time = date;
				var Y = time.getFullYear();
				var M = time.getMonth();
				M = (M + 1) < 10 ? '0' + (M + 1) : (M + 1);
				var d = time.getDate();
				d = d < 10 ? '0' + d : d;
				var week = new Array("日", "一", "二", "三", "四", "五", "六");
				return new Array(Y + "-" + M + "-" + d, "星期" + week[time.getDay()], time, M + "-" + d);
			},
			tomorrow(date, isday) {
				var time = date;
				if (isday == 0) time.setTime(time.getTime() + 1 * 24 * 60 * 60 * 1000);
				var Y = time.getFullYear();
				var M = time.getMonth();
				M = (M + 1) < 10 ? '0' + (M + 1) : (M + 1);
				var d = time.getDate();
				d = d < 10 ? '0' + d : d;
				var week = new Array("日", "一", "二", "三", "四", "五", "六");
				return new Array(Y + "-" + M + "-" + d, "星期" + week[time.getDay()], time, M + "-" + d);
			},
			change() {
				this.radio = 6;
			},
			departureTime() {
				this.calendar = !this.calendar;
				this.departureIsReturn = 0;
			},
			returnTime() {
				this.calendar = !this.calendar;
				this.departureIsReturn = 1;
			},
			changeCity(Abbreviation, distinguish, isdistinguish) {
				var domesticAbbreviation = '';
				var foreignAbbreviations = '';
				var dShow = '';
				if (isdistinguish == 0) {
					domesticAbbreviation = this.domesticAbbreviationTwo;
					foreignAbbreviations = this.foreignAbbreviationsTwo;
					dShow = this.dShowTwo;
				} else {
					domesticAbbreviation = this.domesticAbbreviation;
					foreignAbbreviations = this.foreignAbbreviations;
					dShow = this.dShow;
				}
				if (distinguish == 0) {
					var name = '';
					for (var item in domesticAbbreviation) {
						var city = domesticAbbreviation[item];
						if (city.key == Abbreviation) {
							city.type = "sortClicke"
							name = city.name;
						} else {
							city.type = "sort"
						}
					}
					for (var item in dShow) {
						if (name.indexOf(dShow[item].name) != -1) {
							dShow[item].Show = "1";
						} else {
							dShow[item].Show = "0";
						}
					}

				} else {
					var name = '';
					for (var item in foreignAbbreviations) {
						var city = foreignAbbreviations[item];
						if (city.key == Abbreviation) {
							city.type = "sortClicke"
							name = city.name;
						} else {
							city.type = "sort"
						}
					}

					for (var item in dShow) {
						if (name == dShow[item].name) {
							dShow[item].Show = "1";
						} else {
							dShow[item].Show = "0";
						}
					}
				}
			},
			changeENW(index, distinguish) {
				var domesticAbbreviation = '';
				var foreignAbbreviations = '';
				var dShow = '';
				if (distinguish == 0) {
					domesticAbbreviation = this.domesticAbbreviationTwo;
					foreignAbbreviations = this.foreignAbbreviationsTwo;
					dShow = this.dShowTwo;
					if (index == 0) {
						this.internalTwo = 1;
						this.externalTwo = 0;
					} else {
						this.internalTwo = 0;
						this.externalTwo = 1;
					}
				} else {
					domesticAbbreviation = this.domesticAbbreviation;
					foreignAbbreviations = this.foreignAbbreviations;
					dShow = this.dShow;
					if (index == 0) {
						this.internal = 1;
						this.external = 0;
					} else {
						this.internal = 0;
						this.external = 1;
					}
				}

				if (index == 0) {
					for (var item in domesticAbbreviation) {
						var city = domesticAbbreviation[item];
						if (city.type == "sortClicke") {
							var name = city.name;
							for (var item in dShow) {
								if (name.indexOf(dShow[item].name) != -1) {
									dShow[item].Show = "1";
								} else {
									dShow[item].Show = "0";
								}
							}
							break;
						}
					}
				} else {
					var name = "亚洲";
					for (var item in foreignAbbreviations) {
						var city = foreignAbbreviations[item];
						if (city.type == "sortClicke") {
							var name = city.name;
							for (var item in dShow) {
								if (name == dShow[item].name) {
									dShow[item].Show = "1";
								} else {
									dShow[item].Show = "0";
								}
							}
						}
					}
				}
			},
			cityShow() {
				this.city = !this.city;
			},
			cityShowTwo() {
				this.cityTwo = !this.cityTwo;
			},
			cityChange(name) {
				this.cityName = name;
				this.city = false;
			},
			cityChangeTwo(name) {
				this.cityNameTwo = name;
				this.cityTwo = false;
			},
			query() {
				var url = window.location.href;
				if (url.indexOf("/Search") == -1) {
					window.location.href = "/Search";
				} else {
					this.$parent.updateInformation();
				}
			},
			queryConvenient() {
				var url = window.location.href;
				if (url.indexOf("/Search") != -1 && this.convenientQuery == true) {
					this.$parent.updateInformation();
				}
			}
		}
	};
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.butone {
		background-color: #00ABFF;
		color: #ffffff;
	}

	.butoneNo {
		color: black;
	}

	.sort {
		color: black;
	}

	.Gonger {
		color: black;
	}

	.Gonger:hover {
		color: #00ABFF;
		background-color: rgb(0, 171, 255, 0.1);
	}

	.sort:hover {
		color: #00ABFF;
	}

	.sortClicke {
		border-bottom: #00ABFF 2px solid;
		color: #00ABFF;
	}
</style>